<template>
  <div class="trend">
    <div class="trend-content-list">
      <div>
        <div class="trend-head-list">
          <div class="box-bg group switch-route-box">
            <div class="switch-route-btn" v-for="(item, index) in navList" :key="index"
              :class="navListSum === index ? 'active' : ''" @click="SwitchRoute(index, item.path)">
              <i></i>
              <span>{{ item.title }}</span>
            </div>
          </div>
          <!-- <div class="box-bg group other-box">
        <div class="title">
          <i></i>
          <span>车辆统计</span>
        </div>
        <div class="btn-list">
          <div v-for="item in headBtnList1" class="btn">
            <el-radio v-model="radio1" :label="item">{{ item }}</el-radio>
          </div>
        </div>
      </div>
      <div class="box-bg group other-box">
        <div class="title">
          <i></i>
          <span>排放阶段</span>
        </div>
        <div class="btn-list">
          <el-checkbox-group v-model="headBtnList2Btn" :min="1">
            <div v-for="item in headBtnList2" class="btn">
              <el-checkbox :label="item">{{ item }}</el-checkbox>
            </div>
          </el-checkbox-group>
                   <div
            v-for="item in headBtnList2"
            class="btn"
          >
            <el-radio v-model="radio1" :label="item">{{ item }}</el-radio>
          </div>
        </div>
      </div>
      <div class="box-bg group other-box">
        <div class="title">
          <i></i>
          <span>重要污染物排放量</span>
        </div>
        <div class="drop-down">
          <el-select v-model="value1" placeholder="请选择">
            <el-option v-for="item in DropDownList1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="box-bg other-box">
        <div class="title">
          <i></i>
          <span>重要污染物排放强度</span>
        </div>
        <div class="drop-down">
          <el-select v-model="value2" placeholder="请选择">
            <el-option v-for="item in DropDownList2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div> -->
        </div>
        <div class="box-bg content-left">

          <el-checkbox-group v-model="contentBtn" :min="1">
            <div v-for="(item, index) in regionDropDownList2" :key="item.value" class="btn"
              :class="isLong ? 'long' : ''">
              <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div class="content-right">
        <div class="box-bg choice-list-box">
          <div class="title">
            <i></i><span>时间类型</span>
          </div>
          <div class="choice-list">
            <div class="choice1">
              <div v-for="item in timelist1" class="btn">
                <el-radio v-model="radio2" :label="item.value">{{ item.label }}</el-radio>
              </div>
            </div>
            <div class="choice2">
              <span class="drop-down-title">时间选择框</span>
              <div class="drop-down">
                <el-date-picker v-model="timesvalue" type="datetimerange" start-placeholder="开始日期"
                  end-placeholder="结束日期" @focus="focus" :clearable="false" range-separator="~"
                  :default-time="['00:00:00']" :readonly="readonly">
                </el-date-picker>
              </div>
            </div>
            <div class="choice3">
              <span class="drop-down-title">区域类型</span>
              <div class="drop-down">
                <el-select v-model="region" placeholder="请选择">
                  <el-option v-for="item in regionDropDownList1" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="choice4">
              <div v-for="item in timelist2" class="btn">
                <el-radio v-model="radio3" :label="item.value">{{ item.label }}</el-radio>
              </div>
            </div>
          </div>
          <div class="btnlist">
            <div class="all-btn" @click="statisticsBtn">统计</div>
            <div class="reset-btn" @click="resetBtn">重置</div>
          </div>
        </div>
        <div class="box-bg content-echarts">
          <!-- <div class="btn" :class="JzxOpacity === 0 ? '' : 'active'" @click="isJzx">
            <i></i>
            <span>基准线</span>
          </div>-->
          <div class="contentEcharts" ref="contentEcharts"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as dayjs from 'dayjs'
import { getRegionAnalysisInTime, getRegionDict } from '@/api/largescreen/'
import * as echarts from 'echarts';

import {
  getCity,
  regionInfoList,
  site
} from '@/api/hzMJPT/mainInterface.js';

// 合并数组函数
let sumItem = function (arr1, arr2) {
  if (arr1.length === 0) {
    arr1 = arr2
    return arr1;
  } else {
    arr1.map(function (value, index) {
      arr2[index] = (arr2[index] * 1000 + value * 1000) / 1000;
    })
    return arr2;
  }
}

/*当前阶段小时无法请求数据，获取上小时的时间戳*/
let TimeFun = function (time, str, num) {
  // time时间戳,str判断小时、日、月,num判断传出开始时间还是结束时间
  // 结束时间endStr,endTime
  let endStr = dayjs.default(time).format('YYYY-MM-DD HH:00:00')
  let endTime = dayjs.default(endStr).toDate()
  if (num === 1) {
    return endTime
  }
  let start, stStr, stTime
  /*start:开始时间
  stStr:开始时间转换字符串,转换清空分秒格式
  stTime:字符串格式完后的时间戳*/
  if (str === 'hour') {
    start = dayjs.default().hour() - 6
    stStr = dayjs.default(time).hour(start).format('YYYY-MM-DD HH:00:00')
    stTime = dayjs.default(stStr).toDate()
    return stTime
  } else if (str === '24hour') {
    start = dayjs.default().date() - 1
    stStr = dayjs.default(time).date(start).format('YYYY-MM-DD HH:00:00')
    stTime = dayjs.default(stStr).toDate()
    return stTime
  } else if (str === 'day') {
    start = dayjs.default().date() - 7
    stStr = dayjs.default(time).date(start).format('YYYY-MM-DD HH:00:00')
    stTime = dayjs.default(stStr).toDate()
    return stTime
  } else if (str === '30day') {
    start = dayjs.default().month() - 1
    stStr = dayjs.default(time).month(start).format('YYYY-MM-DD HH:00:00')
    stTime = dayjs.default(stStr).toDate()
    return stTime
  } else if (str === 'month') {
    start = dayjs.default().month() - 6
    stStr = dayjs.default(time).month(start).format('YYYY-MM-DD HH:00:00')
    stTime = dayjs.default(stStr).toDate()
    return stTime
  }
}
let createStHourTime = TimeFun(new Date(), 'hour', 0)
let createEndHourTime = TimeFun(new Date(), 'hour', 1)
// 是否切换过区域类型
let firstGet = false
export default {
  name: 'trend',
  data() {
    return {
      navList: [
        { title: '区域对比', path: '/statistical/region' },
        { title: '趋势对比', path: '/statistical/trend' },
        // { title: '基准分析', path: '/statistical/benchmark' }
      ],
      myChart: null,
      navListSum: 0,
      /*车辆统计*/
      radio1: '车辆数',
      headBtnList1: ['车辆密度', '车辆数'],
      /*排放阶段*/
      headBtnList2Btn: [],
      headBtnList2: ['国三', '国四', '国五', '国六'],
      /*下拉框*/
      value1: '',
      value2: '',
      DropDownList1: [
        { value: 'NOX', label: 'NOX' },
        { value: 'PM', label: 'PM' }
      ],
      DropDownList2: [
        { value: 'NOX', label: 'NOX' },
        { value: 'PM', label: 'PM' }
      ],
      // 第二块
      radio2: 'hour',
      radio3: '',
      //时间类型：小时日月
      timelist1: [
        { value: 'hour', label: '小时' },
        { value: 'day', label: '日' }
        // { value: 'month', label: '月' }
      ],
      timelist2: [
        { value: 'hour', label: '近24小时' },
        { value: 'day', label: '近一周' },
        { value: 'month', label: '近一月' }
      ],
      // 区域类型
      region: 'qx',
      regionDropDownList1: [
        { value: 'qx', label: '区域' },
        { value: 'gyy', label: '重点工业园区' },
        { value: 'gkd', label: '监测点' }
      ],
      regionDropDownList2: [],
      // 左侧列表
      isLong: false,
      contentBtn: [],
      timesvalue: [createStHourTime, createEndHourTime],
      readonly: false,
      // 底部线图
      JzxOpacity: 0,
      JzxDate: [],
      JzxDateKey: '',
      isDataZoom: true,
      isDataZoomMinSpan: 100,
      lineX: [],
      lineName: [],
      lineTitle: '',
      // 接口请求到的数据
      getJson: [],
      echartSeries: [],
      // 存储接口返回数据
      allEchartDate: {}

    }
  },
  computed: {},
  mounted() {
    this.GetRegionDict()
  },
  methods: {
    /*切换路由*/
    SwitchRoute(index, path) {
      if (this.$route.path.indexOf(path) === -1) {
        this.navListSum = index
        this.$router.push({ path: path })
      }
    },
    /*时间选择*/
    focus() {
      // 设置时间选择器中样式
      this.$nextTick(() => {
        document.getElementsByClassName('el-time-spinner__wrapper')[0].setAttribute('style', 'width:100%') // 小时列居中
        document.getElementsByClassName('el-time-spinner__wrapper')[3].setAttribute('style', 'width:100%') // 小时列居中
        document.getElementsByClassName('el-time-spinner__wrapper')[1].setAttribute('style', 'display:none') // 隐藏分列
      })
    },
    /*字典接口*/
    GetRegionDict() {
      getCity()
        .then(res => {
          let data = res.data
          let arry = []
          data.forEach(e => {
            let obj = {}
            obj.value = e.districtCode
            obj.label = e.district
            arry.push(obj)
          })
          for (let key in data) {

          }

          if (this.region === 'qx') {
            this.isLong = false
          } else {
            this.isLong = true
          }
          this.regionDropDownList2 = arry
          this.contentBtn = []
          arry.forEach(item => {
            this.contentBtn.push(item.value);
          });
          firstGet = false
          this.Getparameter()
        })
        .catch(err => {
          console.log(err)
        })
    },
    /*请求数据接口*/
    Getparameter() {
      let that = this
      let stTime = dayjs.default(that.timesvalue[0]).format('YYYY-MM-DD HH:00:00')
      let endTime = dayjs.default(that.timesvalue[1]).format('YYYY-MM-DD HH:00:00')
      let regionIds = that.contentBtn.join(',')
      let timeType = that.radio2 === '' ? (that.radio3 === 'month' ? 'day' : that.radio3) : that.radio2
      // console.log(stTime, endTime, regionIds, timeType,that.region)
      this.GetRegionAnalysisInTime(stTime, endTime, regionIds, timeType)
    },
    GetRegionAnalysisInTime(stTime, endTime, regionIds, timeType) {
      let that = this
      getRegionAnalysisInTime(
        {
          'stTime': stTime,
          'endTime': endTime,
          'regionIds': regionIds,
          'regionType': that.region,
          'timeType': timeType
        }
      )
        .then(res => {

          if (Object.keys(res.data).length === 0) {
            if (this.myChart) {
              this.myChart.clear()
            }
            return
          }
          let data = res.data
          // 取出区域名
          let myName = Object.keys(data)
          // myName.splice(myName.indexOf('基准'), 1);
          this.JzxDate = data['基准']
          // 定义接收处理过的对象
          let myJson = {}
          for (let v of myName) {
            let obj = {
              'g3': [],
              'g4': [],
              'g5': [],
              'g6': [],
              'g3Num': [],
              'g4Num': [],
              'g5Num': [],
              'g6Num': [],
              'nox': [],
              'noxDensity': [],
              'pm': [],
              'pmDensity': [],
              'time': [],
              'vehicleDensity': [], //车辆密度
              'vehicleNum': [],
            }
            for (let value of data[v]) {
              for (let key in value) {
                if (obj.hasOwnProperty(key)) {
                  // if (key === 'g3' || key === 'g4' || key === 'g5' || key === 'g6') {
                  //   let num = parseFloat((value[key] * 100).toFixed(2))
                  //   obj[key].push(num)
                  // } else if (key === 'g3Num' || key === 'g4Num' || key === 'g5Num' || key === 'g6Num') {
                  //   let num = parseFloat((value[key] * 100).toFixed(2)) / 100
                  //   obj[key].push(num)
                  // } else if (key === 'nox' || key === 'pm') {
                  //   let num = parseFloat((value[key] * 1000).toFixed(3))
                  //   obj[key].push(num)
                  // } else if (key === 'noxDensity' || key === 'pmDensity') {
                  //   let num = parseFloat(value[key].toFixed(6))
                  //   obj[key].push(num)
                  // } else {
                  obj[key].push(value[key])
                  // }

                }
              }
            }
            myJson[v] = obj
          }
          this.allEchartDate = myJson
        })
        .catch(err => {
          console.log(err)
        })
    },
    PageParam(params) {
      this.JzxDateKey = ''
      let newDate = this.allEchartDate
      let arry1 = []
      let myName = []
      let X = []
      for (let k in newDate) {

        let originalObj = {
          name: '',
          type: 'line',
          data: [],
          itemStyle: {
            borderWidth: 2
          },
          markLine: {
            lineStyle: {
              opacity: this.JzxOpacity,
            },
            data: [{ type: 'average', name: 'Avg', }],
            label: {
              color: '#fff',
              fontSize: 18,
              position: 'insideEndTop',
            }
          }
        }
        let originalObj2 = {
          name: '',
          type: 'line',
          data: [],
          itemStyle: {
            borderWidth: 2
          },
          markLine: {
            lineStyle: {
              opacity: this.JzxOpacity,
            },
            data: [{ type: 'average', name: 'Avg', }],
            label: {
              color: '#fff',
              fontSize: 18,
              position: 'insideEndTop',
            }
          }
        }
        X.push(newDate[k].time)
        originalObj.name = k
        originalObj2.name = k + '车辆数'
        if (typeof params === 'object') {
          this.JzxDateKey = []
          let Aarry = []
          let Aarry2 = []
          for (let paramV of params) {
            if (paramV === '国三') {
              Aarry = sumItem(Aarry, newDate[k].g3)
              Aarry2 = sumItem(Aarry2, newDate[k].g3Num)
              this.JzxDateKey.push('g3')
              this.JzxDateKey.push('g3Num')
            } else if (paramV === '国四') {
              Aarry = sumItem(Aarry, newDate[k].g4)
              Aarry2 = sumItem(Aarry2, newDate[k].g4Num)
              this.JzxDateKey.push('g4')
              this.JzxDateKey.push('g4Num')
            } else if (paramV === '国五') {
              Aarry = sumItem(Aarry, newDate[k].g5)
              Aarry2 = sumItem(Aarry2, newDate[k].g5Num)
              this.JzxDateKey.push('g5')
              this.JzxDateKey.push('g5Num')
            } else if (paramV === '国六') {
              Aarry = sumItem(Aarry, newDate[k].g6)
              Aarry2 = sumItem(Aarry2, newDate[k].g6Num)
              this.JzxDateKey.push('g6')
              this.JzxDateKey.push('g6Num')
            }
          }
          originalObj.data = Aarry
          originalObj2.data = Aarry2
        } else if (params === '车辆密度') {
          this.JzxDateKey = 'vehicleDensity'
          originalObj.data = newDate[k].vehicleDensity
        } else if (params === '车辆数') {
          this.JzxDateKey = 'vehicleNum'
          originalObj.data = newDate[k].vehicleNum
        } else if (params === 'pm') {
          this.JzxDateKey = 'pm'
          originalObj.data = newDate[k].pm
        } else if (params === 'nox') {
          this.JzxDateKey = 'nox'
          originalObj.data = newDate[k].nox
        } else if (params === 'pmDensity') {
          this.JzxDateKey = 'pmDensity'
          originalObj.data = newDate[k].pmDensity
        } else if (params === 'noxDensity') {
          this.JzxDateKey = 'noxDensity'
          originalObj.data = newDate[k].noxDensity
        }

        arry1.push(originalObj)
        myName.push(k)
        if (originalObj2.data.length) {
          myName.push(originalObj2.name)
          arry1.push(originalObj2)
        }
      }
      this.isDataZoom = false
      this.isDataZoomMinSpan = 100

      if (X[0].length <= 8) {
        this.isDataZoom = false
        this.isDataZoomMinSpan = 100
      } else {
        let num = (8 / X[0].length).toFixed(2) * 100
        this.isDataZoom = true
        this.isDataZoomMinSpan = num
      }
      this.lineX = X[0]
      this.lineName = myName
      this.echartSeries = arry1
    },
    LinePage(ref) {
      let that = this
      let myChart = echarts.getInstanceByDom(ref)
      if (myChart == undefined) {
        myChart = echarts.init(ref)
      }
      let Opt = {
        title: {
          text: this.lineTitle,
          textStyle: {
            color: '#e2e8e7',
            fontSize: 22,
            lineHeight: 22,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei',
            overflow: 'truncate',
            width: 400
          },
          padding: [27, 0, 0, 30]
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          renderMode: 'html',
          backgroundColor: '#00000044',
          borderWidth: 0,
          extraCssText: 'box-shadow: 0 0 6px 2px #098e8d;',
          formatter(params, ticket, callback) {
            // console.log(params)
            let htmlStr = ''
            for (let i = 0; i < params.length; i++) {
              let param = params[i]
              let seriesName = param.seriesName//图例名称
              let axisValue = param.axisValue//x轴值
              let value = param.value//y轴值
              let color = param.color//图例颜色
              htmlStr += `
                        <div style="color: #e8edf3">
                          ${axisValue}${seriesName}:
                          <span style="font-size: 14px!important;color:${color}!important;">
                           ${value}
                          </span>
                        </div>
                `
            }
            return htmlStr
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: that.isDataZoomMinSpan,
            minSpan: that.isDataZoomMinSpan,
            show: that.isDataZoom, //是否显示
          },
          {
            showDetail: false, // 拖拽时候是否显示具体数值信息
            showDataShadow: false, // 组件中是否显示数据暗影
            type: 'slider',//图表下方的伸缩条
            show: that.isDataZoom, //是否显示
            height: 9,
            backgroundColor: '#0c2b4f',
            fillerColor: '#707086',//选中区域颜色
            borderColor: 'transparent',
            handleStyle: {
              opacity: 0
            },
            moveHandleStyle: {
              color: '#707086',
              borderColor: 'transparent',
              borderWidth: 0,
              opacity: 1
            },
            textStyle: {
              show: false
            },
            realtime: true, //拖动时，是否实时更新系列的视图
            left: 0,
            right: 0,
            bottom: 7,
            brushSelect: false
          }],
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal',
          icon: 'circle',
          top: 33,
          right: 30,
          width: 1000,
          align: 'left',
          padding: 0,
          itemGap: 25,
          itemWidth: 13,
          itemHeight: 13,
          textStyle: {
            color: '#e2e8e7',
            padding: [4, 0, 0, 10],
            rich: {
              a: {
                fontSize: 16
              }
            }
          },
          formatter(pars) {
            return `{a|${pars}}`
          },
          data: this.lineName,
          pageIconColor: '#ffffffba',
          pageIconInactiveColor: '#ffffff4f',
          pageButtonItemGap: 5,
          pageButtonGap: 30,
          pageIconSize: 16,
          pageTextStyle: {
            color: '#ffffffba',
            fontSize: 18

          }
        },
        grid: {
          left: 35,
          right: 50,
          bottom: 40,
          top: 76,
          containLabel: true
        },
        xAxis: {
          show: true,
          type: 'category',
          axisTick: {
            'show': false   //去掉x轴刻度线
          },
          axisLabel: {
            color: '#e2e8e7',
            margin: 20,
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'shadow',
            label: {
              show: false
            },
            shadowStyle: {
              color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: '#0439ca00' },
                { offset: 0.6, color: '#10c2d7' },
                { offset: 0.3, color: '#1079eb' },
                { offset: 0, color: '#1065f1' }
              ]),
              opacity: 0.2
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e5edf733',
              width: 1,
              type: 'dotted'
            }
          },
          data: this.lineX
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              width: 1,
              type: 'dotted',
              color: '#e5edf733'
            }
          },
          axisLabel: {
            show: false
          }
        },
        series: this.echartSeries
      }
      myChart.setOption(Opt, true)
      this.myChart = myChart
    },
    isJzx() {
      /*console.log(this.JzxDate)
      console.log(this.echartSeries)*/
      if (this.JzxOpacity) {
        this.JzxOpacity = 0
      } else {
        this.JzxOpacity = 1
      }
      let echartSeries = this.echartSeries
      for (let v of echartSeries) {
        v.markLine.lineStyle.opacity = this.JzxOpacity
        for (let v2 of this.JzxDate) {
          if (v.name.indexOf(v2.regionName) !== -1) {
            if (typeof this.JzxDateKey === 'string') {
              v.markLine.data[0].yAxis = v2[this.JzxDateKey]
            } else {
              if (v.name.indexOf("车辆数") !== -1) {
                let num = 0;
                for (let v3 of this.JzxDateKey) {
                  if (v3.length > 2) {
                    let lit = v2[v3].toFixed(2) * 100
                    num = num + lit
                  }
                }
                num = (num / 100)
                v.markLine.data[0].yAxis = num
              } else {
                let num = 0;
                for (let v3 of this.JzxDateKey) {
                  if (v3.length === 2) {
                    let lit = v2[v3].toFixed(2) * 100
                    num = num + lit
                  }
                }
                num = (num / 100)
                v.markLine.data[0].yAxis = num
              }

            }
          }
        }
      }
      this.echartSeries = echartSeries
    },
    statisticsBtn() {
      if (this.myChart) {

      }
      this.Getparameter()

      this.JzxOpacity = 0
      for (let v of this.echartSeries) {
        v.markLine.lineStyle.opacity = this.JzxOpacity
      }
      if (firstGet) {
        this.GetRegionDict()
      } else {
        this.Getparameter()
      }
    },
    resetBtn() {
      let arr = []
      arr.push(this.regionDropDownList2[0].value)
      this.contentBtn = arr
      this.Getparameter()
    },
  },
  watch: {
    '$route': {
      handler: function (val, oldval) {

        // console.log(val)
        // 当前先这样 todo 之后需要监听路由
        for (const k in this.navList) {
          if (this.navList[k].path.indexOf(val.name) !== -1) {
            this.navListSum = parseInt(k)
            break
          }
        }
      },
      immediate: true
    },
    'radio1': {
      immediate: true,
      deep: true,
      handler(newVal, old) {
        if (newVal !== '') {
          this.headBtnList2Btn = []
          this.value1 = ''
          this.value2 = ''
          if (newVal === '车辆密度' || newVal === '车辆数') {
            this.lineTitle = '车辆统计：' + newVal
          } else {
            this.lineTitle = '车辆统计：' + newVal
          }
          // this.PageParam(newVal)

        }
      }

    },
    'headBtnList2Btn': {
      immediate: true,
      deep: true,
      handler(newVal, old) {
        if (newVal.length) {
          this.radio1 = ''
          this.value1 = ''
          this.value2 = ''
          let name = ''
          if (newVal.length === 1) {
            name = newVal[0]
          } else {
            name = newVal.join("+")
          }
          this.lineTitle = '排放阶段：' + name
          // this.PageParam(newVal)
        }

      }

    },
    'value1': {
      immediate: true,
      deep: true,
      handler(newVal, old) {
        if (newVal !== '') {
          this.radio1 = ''
          this.headBtnList2Btn = []
          this.value2 = ''
          this.lineTitle = '重要污染物排放量：' + newVal
          /*if (newVal === 'NOX') {
            this.PageParam('nox')
          } else if (newVal === 'PM') {
            this.PageParam('pm')
          }*/
        }
      }
    },
    'value2': {
      immediate: true,
      deep: true,
      handler(newVal, old) {
        if (newVal !== '') {
          this.radio1 = ''
          this.headBtnList2Btn = []
          this.value1 = ''
          this.lineTitle = '重要污染物排放强度：' + newVal
          /*if (newVal === 'NOX') {
            this.PageParam('noxDensity')
          } else if (newVal === 'PM') {
            this.PageParam('pmDensity')
          }*/
        }
      }
    },

    'radio2': {
      immediate: true,
      deep: true,
      handler(newVal, old) {
        if (newVal !== '') {
          this.radio3 = ''
          this.readonly = false
          if (newVal === 'hour') {
            let StTime = TimeFun(new Date(), newVal, 0)
            let EndTime = TimeFun(new Date(), newVal, 1)
            this.timesvalue = [StTime, EndTime]
          } else if (newVal === 'day') {
            let StTime = TimeFun(new Date(), newVal, 0)
            let EndTime = TimeFun(new Date(), newVal, 1)
            this.timesvalue = [StTime, EndTime]
          } else if (newVal === 'month') {
            let StTime = TimeFun(new Date(), newVal, 0)
            let EndTime = TimeFun(new Date(), newVal, 1)
            this.timesvalue = [StTime, EndTime]
          }

        }
      }

    },
    'radio3': {
      immediate: true,
      deep: true,
      handler(newVal, old) {
        if (newVal !== '') {
          this.radio2 = ''
          this.readonly = true
          if (newVal === 'hour') {
            let StTime = TimeFun(new Date(), '24hour', 0)
            let EndTime = TimeFun(new Date(), '24hour', 1)
            this.timesvalue = [StTime, EndTime]
          } else if (newVal === 'day') {
            let StTime = TimeFun(new Date(), newVal, 0)
            let EndTime = TimeFun(new Date(), newVal, 1)
            this.timesvalue = [StTime, EndTime]
          } else if (newVal === 'month') {
            let StTime = TimeFun(new Date(), '30day', 0)
            let EndTime = TimeFun(new Date(), '30day', 1)
            this.timesvalue = [StTime, EndTime]
          }
        }
      }

    },
    'timesvalue': {
      immediate: true,
      deep: true,
      handler(newVal, old) {
        /*if (this.contentBtn.length !== 0) {
          this.Getparameter()
        }*/
      }
    },
    'region': {
      immediate: false,
      deep: true,
      handler(newVal, old) {

        if (newVal == 'qx') {
          getCity()
            .then(res => {
              let data = res.data

              let arry = []
              data.forEach(e => {
                let obj = {}
                obj.value = e.districtCode
                obj.label = e.district
                arry.push(obj)
              })
              for (let key in data) {

              }

              if (this.region === 'qx') {
                this.isLong = false
              } else {
                this.isLong = true
              }
              this.regionDropDownList2 = arry
              this.contentBtn = []
              arry.forEach(item => {
                this.contentBtn.push(item.value);
              });
              firstGet = false
              this.Getparameter()
            })
            .catch(err => {
              console.log(err)
            })
        } else if (newVal == 'gyy') {
          regionInfoList({ regionType: 'GYY' })
            .then(res => {
              let data = res.data
              let arry = []
              data.forEach(e => {
                let obj = {}
                obj.value = e.regionId
                obj.label = e.regionName
                arry.push(obj)
              })

              if (this.region === 'qx') {
                this.isLong = false
              } else {
                this.isLong = true
              }
              this.regionDropDownList2 = arry
              this.contentBtn = []
              arry.forEach(item => {
                this.contentBtn.push(item.value);
              });
              firstGet = false
              this.Getparameter()
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          site()
            .then(res => {
              let data = res.data
              let arry = []
              data.forEach(e => {
                let obj = {}
                obj.value = e.siteCode
                obj.label = e.siteName
                arry.push(obj)
              })

              if (this.region === 'qx') {
                this.isLong = false
              } else {
                this.isLong = true
              }
              this.regionDropDownList2 = arry
              this.contentBtn = []
              arry.forEach(item => {
                this.contentBtn.push(item.value);
              });
              firstGet = false
              this.Getparameter()
            })
            .catch(err => {
              console.log(err)
            })
        }
        if (newVal !== old) {
          firstGet = true
        } else {
          firstGet = false
        }
      }
    },
    'lineTitle': {
      handler(newVal, old) {
        // this.LinePage(this.$refs.contentEcharts)
      }
    },
    'echartSeries': {
      immediate: false,
      deep: true,
      handler(newVal, old) {
        this.LinePage(this.$refs.contentEcharts)
      }
    },
    'allEchartDate': {
      immediate: false,
      deep: true,
      handler(newVal, old) {
        if (this.radio1 !== '') {
          this.PageParam(this.radio1)
        }

        // if (this.radio1 !== '') {
        //   this.PageParam(this.radio1)
        // } else if (this.headBtnList2Btn.length) {
        //   this.PageParam(this.headBtnList2Btn)
        // } else if (this.value1 !== '') {
        //   if (this.value1 === 'NOX') {
        //     this.PageParam('nox')
        //   } else if (this.value1 === 'PM') {
        //     this.PageParam('pm')
        //   }
        // } else if (this.value2 !== '') {
        //   if (this.value2 === 'NOX') {
        //     this.PageParam('noxDensity')
        //   } else if (this.value2 === 'PM') {
        //     this.PageParam('pmDensity')
        //   }
        // }
        // if (this.radio1 === '' && this.value1 === '' && this.value2 === '' && this.headBtnList2Btn.length === 0) {
        //   this.radio1 = '车辆密度'
        // }

      }
    }

  }

}
</script>

<style scoped lang="scss">
//背景
.box-bg {
  background-image: linear-gradient(0deg, rgba(55, 55, 74, 0.25) 0%, rgba(55, 55, 74, 0.25) 100%);

}

.trend {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  top: 90px;
  position: relative;
  .trend-head-list {
    width: 100%;
    // width: 325px ;
    height: 115px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    //顶部div间距
    .group {
      // margin-right: 20px;
    }

    .switch-route-box {
      width: 325px;
      height: 115px;
      box-sizing: border-box;
      padding: 15px 0px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      .switch-route-btn {
        width: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        cursor: pointer;

        i {
          width: 45px;
          height: 45px;
          background-size: contain;
        }

        span {
          font-size: 22px;
          color: #e9eef3;
          line-height: 1;
        }

        &:nth-child(1) {
          i {
            background: url("~@/assets/images/region-btn.svg") no-repeat center center;
          }
        }

        &:nth-child(2) {
          i {
            background: url("~@/assets/images/trend-btn.svg") no-repeat center center;
          }
        }

        &:nth-child(3) {
          i {
            background: url("~@/assets/images/benchmark-btn.svg") no-repeat center center;
          }
        }
      }

      .active {
        span {
          color: #07f5c5;
        }

        &:nth-child(1) {
          i {
            background: url("~@/assets/images/region-btn-active.svg") no-repeat center center;
          }
        }

        &:nth-child(2) {
          i {
            background: url("~@/assets/images/trend-btn-active.svg") no-repeat center center;
          }
        }

        &:nth-child(3) {
          i {
            background: url("~@/assets/images/benchmark-btn-active.svg") no-repeat center center;
          }
        }
      }

    }

    .other-box {
      width: 353px;
      height: 100%;
      box-sizing: border-box;
      padding: 16px;

      .title {
        width: 100%;
        height: 26px;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        cursor: default;

        i {
          width: 26px;
          height: 26px;
          margin-right: 11px;
        }

        span {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 22px;
          line-height: 1;
          color: #e4e5e9;
        }

      }

      .btn-list {
        display: flex;
        align-items: center;
        height: 42px;

        .btn {
          display: flex;
          align-items: center;
          margin-right: 15px;

          &:last-child {
            margin-right: 0px;
          }

          ::v-deep {
            .el-radio {
              display: flex;
              align-items: center;
            }

            .el-radio__inner {
              border: none;
              background-color: #042956;
            }

            .el-radio__inner::after {
              display: none;
            }

            .el-radio__label {
              padding-left: 15px;
              font-size: 18px;
              color: #979fa8;
            }

            .el-radio__input.is-checked .el-radio__inner {
              background-color: #07f5d1;
            }

            .el-radio__input.is-checked+.el-radio__label {
              color: #07f5d1;
            }
          }

        }
      }

      .drop-down {
        width: 100%;
        height: 42px;
        background-color: #0a1f3e;

        ::v-deep .el-select {
          width: 100%;
          height: 100%;
        }

        ::v-deep .el-input {
          height: 100%;
        }

        ::v-deep .el-input__inner {
          line-height: 40px;
          height: 100%;
          background-color: transparent;
          border: none;
          border-radius: 0;
          color: #979fa8;
          font-size: 18px;
          overflow: hidden;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        ::v-deep .el-input__inner::-webkit-input-placeholder {
          display: block;
          color: #979fa8;
          font-size: 18px;
          overflow: hidden;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        ::v-deep .el-icon-arrow-up:before {
          content: '';
          width: 20px;
          height: 20px;
          display: inline-block;
          vertical-align: middle;
          transform: rotate(180deg);
          background: url("~@/assets/images/icon-arrow.svg") no-repeat center center;
          background-size: contain;
        }
      }

      &:nth-child(2) {
        .title {
          i {
            background: url("~@/assets/images/regional-icon.svg") no-repeat center center;
            background-size: contain;
          }
        }
      }

      &:nth-child(3) {
        .title {
          i {
            background: url("~@/assets/images/discharge-stage-icon.svg") no-repeat center center;
            background-size: contain;
          }
        }

        .btn-list {
          width: 100%;
          display: flex;
          align-items: center;
          height: 42px;

          .btn {
            float: left;
            margin-right: 15px;
            display: block;
            height: 24px;
            box-sizing: content-box;

            &:last-child {
              margin-right: 0px;
            }
          }

          ::v-deep {
            .el-checkbox {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
            }

            .el-checkbox__inner {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 14px;
              height: 14px;
              box-sizing: border-box;
              transition: none;
              border-radius: 50%;
              border: none;
              background-color: #042956;
            }

            .el-checkbox__inner::after {
              display: none;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner {
              background-color: #07f5d1;
            }

            .el-checkbox__label {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-left: 15px;
              font-size: 18px;
              color: #979fa8;
            }

            .el-checkbox__input.is-checked+.el-checkbox__label {
              color: #07f5d1;
            }
          }

        }
      }

      &:nth-child(4) {
        .title {
          i {
            background: url("~@/assets/images/pollution-quantity-icon.svg") no-repeat center center;
            background-size: contain;
          }
        }
      }

      &:nth-child(5) {
        .title {
          i {
            background: url("~@/assets/images/pollution-intensity-icon.svg") no-repeat center center;
            background-size: contain;
          }
        }
      }
    }


  }

  .trend-content-list {
    width: 100%;
    height: 100%;
    display: flex;
    // align-items: center;

    .content-left {
      width: 325px;
      height: 100%;
      margin-right: 20px;
      box-sizing: border-box;
      padding: 15px 15px;
      overflow: hidden;
      overflow-y: auto;

      .btn {
        float: left;
        display: block;
        min-width: calc(50% - 20px);
        max-width: calc(100% - 20px);
        height: 24px;
        padding: 20px 10px;
        box-sizing: content-box;

        ::v-deep {
          .el-checkbox {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
          }

          .el-checkbox__inner {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            box-sizing: border-box;
            transition: none;
            border-radius: 4px;
            border: solid 2px #042956;
            background-color: #042956;
          }

          .el-checkbox__inner::after {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transform: none;
            transition: none;
            left: 0px;
            top: 0px;
            background-color: #07f5d1;
            box-sizing: border-box;
            display: none;
            border: none;
            position: relative;
          }

          .el-checkbox__input.is-checked .el-checkbox__inner {
            border: solid 2px #07f5d1;
          }

          .el-checkbox__input.is-checked .el-checkbox__inner::after {
            display: block;
          }

          .el-checkbox__label {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 15px;
            font-size: 22px;
            line-height: 24px;
            color: #e9eef3;
          }

          .el-checkbox__input.is-checked+.el-checkbox__label {
            color: #07f5d1;
          }
        }
      }

      .long {
        min-width: calc(100% - 20px);
      }

    }

    .content-right {
      width: 1475px;
      height: 100%;

      .choice-list-box {
        width: 100%;
        height: 180px;
        padding: 15px;
        padding-right: 145px;
        margin-bottom: 20px;
        position: relative;

        .title {
          width: 100%;
          height: 26px;
          display: flex;
          align-items: center;
          cursor: default;
          margin-bottom: 22px;

          i {
            width: 26px;
            height: 26px;
            margin-right: 11px;
            background: url("~@/assets/images/time-icon.svg") no-repeat center center;
            background-size: contain;
          }

          span {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 22px;
            line-height: 1;
            color: #e4e5e9;
          }
        }

        .choice-list {
          width: 100%;
          height: 102px;
          display: flex;
          flex-wrap: wrap;

          .choice1 {
            width: 415px;
            height: 33px;
            display: flex;
            align-items: center;
            margin-right: 25px;

            .btn {
              width: 33.3%;
              display: flex;
              align-items: center;

              &:last-child {
                margin-right: 0px;
              }

              ::v-deep {
                .el-radio {
                  display: flex;
                  align-items: center;
                }

                .el-radio__inner {
                  border: none;
                  background-color: #042956;
                }

                .el-radio__inner::after {
                  display: none;
                }

                .el-radio__label {
                  padding-left: 15px;
                  font-size: 18px;
                  color: #979fa8;
                }

                .el-radio__input.is-checked .el-radio__inner {
                  background-color: #07f5d1;
                }

                .el-radio__input.is-checked+.el-radio__label {
                  color: #07f5d1;
                }
              }

            }
          }

          .choice2 {
            width: 510px;
            height: 33px;
            display: flex;
            align-items: center;
            margin-right: 25px;

            .drop-down-title {
              margin-right: 19px;
              font-size: 18px;
              color: #979fa8;
              cursor: default;
              line-height: 1;

            }

            .drop-down {
              width: 400px;
              height: 100%;
              background-color: #0a1f3e;

              ::v-deep {
                .el-range-editor.el-input__inner {
                  background-color: transparent;
                  border: none;
                  padding: 0px 10px;
                  width: 100%;
                  height: 100%;
                  position: relative;
                }

                .el-date-editor .el-range-input {
                  background: none;
                  font-size: 16px;
                  line-height: 33px;
                  width: 41%;
                  color: #136fcd;
                }

                .el-date-editor .el-range-input::-webkit-input-placeholder {
                  font-size: 16px;
                  color: #979fa8;
                }

                .el-date-editor .el-range__icon {
                  position: absolute;
                  right: 7px;
                  top: 50%;
                  width: 20px;
                  height: 20px;
                  margin-top: -10px;
                  background: url("~@/assets/images/calendar-icon.svg") no-repeat center center;
                  background-size: contain;

                  &::before {
                    display: none;
                  }
                }

                .el-date-editor .el-range-separator {
                  width: 5%;
                  font-size: 16px;
                  color: #136fcd;
                  line-height: 33px;
                }

              }
            }
          }

          .choice3 {
            width: 480px;
            height: 54px;
            display: flex;
            align-items: center;
            margin-right: 20px;

            .drop-down-title {
              margin-right: 19px;
              font-size: 18px;
              color: #979fa8;
              cursor: default;
              line-height: 1;

            }

            .drop-down {
              width: 370px;
              height: 33px;
              background-color: #0a1f3e;

              ::v-deep .el-select {
                width: 100%;
                height: 100%;
              }

              ::v-deep .el-input {
                height: 100%;
              }

              ::v-deep .el-input__inner {
                line-height: 33px;
                height: 100%;
                background-color: transparent;
                border: none;
                border-radius: 0;
                color: #136fcd;
                font-size: 16px;
                overflow: hidden;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              ::v-deep .el-input__inner::-webkit-input-placeholder {
                display: block;
                color: #979fa8;
                font-size: 16px;
                overflow: hidden;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              ::v-deep .el-input--medium .el-input__icon {
                line-height: 33px;
              }

              ::v-deep .el-icon-arrow-up:before {
                content: '';
                width: 16px;
                height: 16px;
                display: inline-block;
                vertical-align: middle;
                transform: rotate(180deg);
                background: url("~@/assets/images/icon-arrow.svg") no-repeat center center;
                background-size: contain;
              }
            }
          }

          .choice4 {
            width: 415px;
            height: 54px;
            display: flex;
            align-items: center;

            .btn {
              width: 33.3%;
              display: flex;
              align-items: center;

              ::v-deep {
                .el-radio {
                  display: flex;
                  align-items: center;
                }

                .el-radio__inner {
                  border: none;
                  background-color: #042956;
                }

                .el-radio__inner::after {
                  display: none;
                }

                .el-radio__label {
                  padding-left: 15px;
                  font-size: 18px;
                  color: #979fa8;
                }

                .el-radio__input.is-checked .el-radio__inner {
                  background-color: #07f5d1;
                }

                .el-radio__input.is-checked+.el-radio__label {
                  color: #07f5d1;
                }
              }

            }
          }
        }

        .btnlist {
          position: absolute;
          top: 35px;
          right: 15px;
          display: block;
          width: 130px;
          height: 115px;

          .all-btn {
            width: 100%;
            height: 48px;
            box-sizing: border-box;
            margin-bottom: 18px;
            background-image: linear-gradient(0deg, rgba(4, 48, 71, 0.6) 0%, rgba(13, 180, 197, 0.6) 100%);
            line-height: 48px;
            text-align: center;
            font-size: 22px;
            color: #e8edf3;
            cursor: pointer;
          }

          .reset-btn {
            width: 100%;
            height: 48px;
            box-sizing: border-box;
            background-image: linear-gradient(0deg, rgba(55, 55, 74, 0.6) 0%, rgba(55, 55, 74, 0.6) 100%);
            line-height: 48px;
            text-align: center;
            font-size: 22px;
            color: #e8edf3;
            cursor: pointer;
          }
        }

      }

      .content-echarts {
        width: 100%;
        height: 700px;
        position: relative;

        .btn {
          z-index: 10;
          position: absolute;
          right: 30px;
          top: 5px;
          display: flex;
          align-items: center;

          i {
            width: 14px;
            height: 14px;
            background: #042956;
            border-radius: 50%;
            margin-right: 15px;
          }

          span {
            font-size: 16px;
            color: #979fa8;
          }

        }

        .active {
          i {
            background: #07f5d1;
          }

          span {
            color: #07f5d1;
          }
        }

        .contentEcharts {
          width: 100%;
          height: 700px;
        }
      }
    }
  }

}
</style>
